<template>
  <r-header />
  <main>
    <router-link to="/">
      <r-logo class="logo" />
    </router-link>
    <div class="line">
      <label class="label">手机</label>
      <div class="combine">
        <input placeholder="请输入手机号" v-model="form.phone_number">
        <button @click="sendSmsValidCode">发送验证码</button>
      </div>
    </div>
    <div class="lines">
      <label class="label">验证码</label>
      <input placeholder="请输入验证码" v-model="form.valid_code">
    </div>
    <div class="lines">
      <label class="label">设置密码</label>
      <input type="password" placeholder="请设置密码" v-model="form.password">
    </div>
    <div class="lines">
      <label class="label">再次设置密码</label>
      <input type="password" placeholder="请再次输入邮箱密码" v-model="form.password_confirm">
    </div>
    <button class="button" @click="phoneRegister()">确认注册</button>
    <div class="qwq">
      <div>有账号？</div>
      <router-link to="/signin">
        <div class="but">立即登陆→</div>
      </router-link>
    </div>
  </main>
</template>

<script type="text/javascript">
// import {ref} from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
  name: "register",
  data() {
    return {
      // cookie:ref(''),
      form: {
        reg_type: "phone",
        valid_code: "",
        phone_number: "",
        password: "",
        password_confirm: "",
      },
    }
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    const phoneRegister = (password, password_confirm, phone_number) => {
      //手机号
      if (phone_number == '') {
        alert(请输入手机号)
        return
      }
      //密码判断
      if (password.length < 6 || password.length > 16 || password != password_confirm) {
        alert("密码长度最低为六位最高为十六位或两次密码输入不一致")
        return
      };
      store.commit('user/register', phone_number)
      router.replace("/")
    };
    return {
      phoneRegister,
    };
  },
  computed: {

  },
  methods: {
    sendSmsValidCode() {
      //手机号格式判断
      var regPhone = (/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/);
      if (!regPhone.test(this.form.phone_number)) {
        alert("无效的手机格式")
        return
      }

      // this.api.sms_valid_code(this.form).then(i => {
      //   console.log("已发送验证码", i)
      // })
      this.is.SendSMSCode(this.form.phone_number).then(i => {
        console.log("已发送验证码，剩余倒计时", i, "s")
      })
    },
    phoneRegister() {
      //手机号
      if (this.form.phone_number == '') {
        alert(请输入手机号)
        return
      }
      //密码判断
      if (this.form.password.length < 6 || this.form.password.length > 16 || this.form.password != this.form.password_confirm) {
        alert("密码长度最低为六位最高为十六位或两次密码输入不一致")
        return
      };
      // this.api.register(this.form).then(i => {
      //   alert("注册成功");
      //   console.log("注册", i)
      //   this.$router.replace("/signin")
      // })
      this.is.LoginBySMSCode({
        phone: this.form.phone_number,
        code: this.form.valid_code,
      }).then(i => {
        alert("注册成功");
        this.$router.replace("/")

        // todo: 1. 保存i.Token
        // todo: 2. src/api/api.js 设置AccessToken为你保存的Token
        localStorage.setItem("token", i.Token)

        // 检查：Token设置正确后，下面接口应该能正确修改密码
        this.iu.UserModifyPassword({
          npass: this.form.password,
          opass: undefined,
        }).then(i => {
          console.log("修改密码", i)
        })
      })
    },
  },
  mounted() {
  }
};
</script>

<style lang="scss" scoped>
main {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  padding: 0rem 1rem 1rem 2rem;

  .line {
    height: 72px;
    margin-bottom: 24px;
    color: rgb(255 255 255);

    .label {
      font-size: 0.875rem;
      font-weight: 600;
      color: rgb(255 255 255);
      line-height: 1.5rem;
      height: 24px;
      width: 382px;
    }

    .combine {
      display: flex;
      flex-direction: row;
      justify-content: center;
      height: 40px;
      width: 384px;
      line-height: 1.5rem;

      > input {
        width: 282px;
        height: 40px;
        margin-right: 8px;
        border-radius: 0.375rem;
        background-color: transparent;
        outline: none;
        border-style: solid;
        border: 1px solid white;
        color: rgb(255 255 255);
        font-size: 0.875rem;
        padding: 0 6px;
        margin-top: 8px;

      }

      input:focus {
        background-color: transparent;
      }

      > button {
        width: 94px;
        height: 40px;
        border-radius: 0.375rem;
        background-color: transparent;
        border: 1px solid white;
        margin-top: 8px;
        outline: none;
        cursor: pointer;
        font-size: 0.875rem;
        font-weight: 600;
        border-style: solid;
        color: #37bcf7;

      }

      button:hover {
        background-color: #37bcf7;
        color: rgb(255 255 255);
      }
    }
  }

  .lines {
    display: flex;
    flex-direction: column;
    height: 72px;
    margin-bottom: 24px;

    .label {
      font-size: 0.875rem;
      font-weight: 600;
      color: rgb(255 255 255);
      line-height: 1.5rem;
      height: 24px;
      width: 382px;
    }

    > input {
      height: 40px;
      width: 384px;
      border-radius: 0.375rem;
      background-color: transparent;
      outline: none;
      border-style: solid;
      border: 1px solid white;
      color: rgb(255 255 255);
      padding: 0 6px;
      margin-top: 8px;

    }

    input:focus {
      background-color: transparent;
    }
  }

  .button {
    height: 40px;
    width: 384px;
    padding: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(255 255 255);
    border: none;
    border-radius: 0.375rem;
    background-color: #334155;
    cursor: pointer;
  }

  button:hover {
    background-color: #37bcf7;
  }

  .qwq {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 64px;
    height: 40px;
    color: #ffffff;
    font-size: 0.875rem;

    .but {
      margin-left: 16px;
      padding: 10px 16px;
      width: 106px;
      font-size: 0.875rem;
      font-weight: 600;
      color: #37bcf7;
      border: 2px solid #37bcf7;
      border-radius: 0.5rem;
      cursor: pointer;

    }
  }

}

.logo {
  margin-bottom: 64px;
}

@media screen and (max-width:660px) {
  main {

    .line {

      .label {
        width: 282px;
      }

      .combine {
        width: 282px;
        line-height: 1.5rem;

        > input {
          width: 200px;

        }
      }
    }

    .lines {
      display: flex;
      flex-direction: column;
      height: 72px;
      margin-bottom: 24px;

      .label {
        width: 282px;
      }

      > input {
        width: 282px;
      }
    }

    .button {
      width: 282px;
    }
  }
}
</style>